<template>
<div>   
    <div  class="synopsis">
         
             <!-- <div class="mao" :style="` background-image:(${detailslist.data.playlist.coverImgUrl}) ;`"> </div> -->
   
         <div class="box">
           <img :src="detailslist.data.playlist.coverImgUrl" alt="">
        </div>
        <div class="text-introduction">
            <div class="introduction-name">
                <div class="Icon">
                    <van-image
                        round
                        width="2rem"
                        height="2rem"
                        :src="detailslist.data.playlist.creator.avatarUrl"
                        />
                </div>
                <span>{{detailslist.data.playlist.creator.nickname}}</span>
            </div>
            {{detailslist.data.playlist.name}}
        </div>
         
    </div>
    <div class="sol">歌曲列表</div>

         <van-cell-group>
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      center
    >
      <template #label>
        <div>
          {{ item.ar[0].name }}
          -
          {{ item.al.name }}
        </div>
      </template>
      <template #icon>
        <div class="num">{{ index + 1 }}</div>
      </template>

      <template #title>
        <slot></slot>
        <div class="song-info">
          <span>{{ item.name }}</span>
          <span v-if="item.alias" class="song-title"> ({{ item.alias }}) </span>
        </div>
      </template>
      <template #right-icon>
        <van-icon size="20" name="play-circle-o" />
      </template>
    </van-cell>
  </van-cell-group>
  <div>精彩评论</div
  >
  <div class="todu">to du</div>
</div>
    
</template>

<script>
import evetBus from '../../event-bus'
export default {
    computed: {
        
        detailslist () {
            if (!evetBus.detailslist) {
                return[]
            }
            return evetBus.detailslist
        },
        list () {
            if (!evetBus.detailslist) {
                return[]
            }
            return evetBus.detailslist.data.playlist.tracks
        }
    },
    created () {
         evetBus.$emit('musicdetails', this.$route.query.id)
    },
    methods:{
      on () {
          console.log(evetBus.detailslist);
      },
      fn() {
          console.log(this.list);
      }
    }
}
</script>

<style scoped>
    .box {
        width: 126px;
        height: 126px;
    }
    img {
        width: 126px;
        height: 126px;
    }
    .synopsis {
        width: 100%;
        height: 186px;
        display: flex;
        padding: 30px;
        box-sizing: border-box;
    }
    .text-introduction {
        display:flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        margin-left: 16px;
    }
    .Icon {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-right: 4px;
    }
    .Icon > img {
        width: 30px;
        height: 30px;
    }
    .introduction-name {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center
    }
    .sol {
        width: 100%;
        background-color: #eeeff0;
    }
    .num {
        margin-right: 12px;
    }
    .song-info {
        font-size: 18px;
    }
    .todu {
        font-size: 30px;
        color:red;
    }
    .mao {
        width: 100%;
        height: 100%;
        filter: blur(20px);
        transform: scale(1.5);
        z-index: -999;
    }
    .mao > image {
        width: 100%;
        height: 100%;
        z-index: -999;
    }
 
</style>
